#{extends 'layout.html' /}
#{set title:messages.get('crud.show.title', 'Planes') /}

#{script 'show_template_plan.js'/}

<div id="crudShow" class="${type.name}">
	
	<h2 id="crudShowTitle">${title}</h2>
	
	#{deleteButton object: object, modelName: 'Plan' /}
	
	<div class="objectForm">
		
		#{form action:@save(object._key()), enctype:'multipart/form-data'}
			
			#{field 'object.comidasPlan'}
				
				#{ifError field.name}
					<div class="${field.errorClass}">
						<span class="error">&{'plan.sinPorciones'}</span>
					</div>
				#{/ifError}
				
				#{list items:object.comidasPlan, as:'comidaPlan' }
					
					<div class="planComida">
						<h2>
							<strong>
								<span>
									${comidaPlan.tipo.display()}
								</span>
							</strong>
						</h2>
						<div>
							<div style="float: left;">
								#{select 'genero', id: 'genero' + comidaPlan.id, labelProperty : 'name', valueProperty: 'name' , items : models.Genero.values(), class: 'bigSelect'}
								#{/select}
								
								#{select 'cantidadPorciones', id:'cantidadPorciones' + comidaPlan.id, items: 1..5, class: 'smallSelect'}
								#{/select}
							</div>
							<div class="btn addComida" style="margin-left: 380px;">
								<a id="agregarPorcionTemplatePlanLink${comidaPlan.id}" onclick="completarAgregarPorcionTemplatePlanLink(${comidaPlan.id});" 
									href="/templatePlans/agregarPorcionTemplatePlan?comidaPlanId=${comidaPlan.id}&templatePlanId=${object.id}"
									style="color: #FFFFFF; font-size: 25px; text-decoration: none;">
									+
								</a>
							</div>
						</div>
						
						<div class="alimentosSel">
							#{list items:comidaPlan.porciones, as:'porcion' }
								<div class="alimentoBig">
									<div class="deleteBtn">
										<a href="@{TemplatePlans.eliminarPorcionTemplatePlan(object.id, porcion.id)}" class="deleteAlimento">X</a>
									</div>
									<div class="alimentoImage">
										<img src="${porcion.genero.iconPath}" alt="${porcion.genero.display()}">
									</div>
									<h3>${porcion.genero.display()}</h3>
									<div class="alimentoStepper">${porcion.cantidadDePorciones}</div>
								</div>
							#{/list}
							
							<div class="clearfix"></div>
							
						</div>
						
					</div>
					
				#{/list}
			#{/field}
			
			#{field 'object.nombre'}
				<div class="crudField crud_text">
					<label for="${field.id}">
						&{'plan.nombre'}
					</label>
					<input id="${field.id}" class="${field.errorClass}" type="text" name="${field.name}" value="${object.nombre}" size="50" maxlength="50" />
					#{ifError field.name}
						<span class="error">&{'plan.requerido'}</span>
					#{/ifError}
				    <span class="crudHelp">
						&{'crud.help.required'}
					</span>
				</div>
			#{/field}
			
			#{field 'object.caloriasDiarias'}
				<div class="crudField crud_number">
					<label for="${field.id}">
						&{'plan.caloriasDiarias'}
					</label>
					<input id="${field.id}" class="${field.errorClass}" type="text" name="${field.name}" value="${object.caloriasDiarias}" size="5"/>
					#{ifError field.name}
						<span class="error">&{'crud.help.range', '500', '10000'}</span>
					#{/ifError}
					<span class="crudHelp">
						&{'formato.numero'}
					</span>
				</div>
			#{/field}
			
			#{field 'object.tipo'}
				<div class="crudField crud_enum">
				        <label for="object_tipo">
						&{'plan.tipo'}
				        </label>
				        
				        <select id="object_tipo" name="object.tipo" class="bigSelect">
				                
				                %{ object.tipo.values().each() { }%
				                        %{
				                                selected = it == object.tipo;
				                                label = it.toString();
				                        }%
				                        
				                        <option name="${it.name()}" ord="${it.ordinal()}" value="${it.name()}" ${selected ? 'selected="selected"' : ''}>${label}</option>
				                        
				                        %{ }
				                }%
				        </select>
				        
				        <span class="crudHelp">
				        	&{'crud.help.required'}
				        </span>
				</div>
			#{/field}
			
			<p class="crudButtons">
				#{if object.temporal}
					<a href="@{TemplatePlans.cancelDelete(object.id)}">&{'cancelar'}</a>
				#{/if}
				#{else}
					<a href="@{TemplatePlans.list}">&{'cancelar'}</a>
				#{/else}
				
				<input type="submit" class="btn" name="_save" value="&{'crud.save', 'Plan'}" />
			</p>
			
		#{/form}
		
	</div>
	
</div>
